{% extends './base.html' %}
{% block title %}
<title>{{page_title}}-註冊</title>

<!-- CSS Page Style -->
<link rel="stylesheet" href="/public/assets/new/css/pages/log-reg-v3.css">
<style>
  .log-reg-v3 .login-input .p-l-20 i {
    min-width: auto;
  }
</style>
{% endblock %}
{% block body %}
  
  <!--=== Breadcrumbs v4 ===-->
    <div class="breadcrumbs-v4">
        <div class="container">
            <span class="page-name">注 冊</span>
            <h1>歡迎您，<span class="shop-green">來到WBIOKR商城</span></h1>
            <ul class="breadcrumb-v4-in">
                <li><a href="/">首頁</a></li>
                <li class="">註冊</li>
            </ul>
        </div><!--/end container-->
    </div> 
    <!--=== End Breadcrumbs v4 ===-->

    <!--=== Registre ===-->
    <div class="log-reg-v3 content-md margin-bottom-30">
        <div class="container">
            <div class="row">
                <div class="col-md-7 md-margin-bottom-50">
                    <h2 class="welcome-title">歡迎來到WBIOKR</h2>
                    <p>歡迎來到WBIOKR歡迎來到WBIOKR歡迎來到WBIOKR歡迎來到WBIOKR歡迎來到WBIOKR</p><br>
                    <div class="row margin-bottom-50">
                        <div class="col-sm-4 md-margin-bottom-20">
                            <div class="site-statistics">
                                <span>20,039</span>
                                <small>商品</small>
                            </div>    
                        </div>
                        <div class="col-sm-4 md-margin-bottom-20">
                            <div class="site-statistics">
                                <span>54,283</span>
                                <small>回購客戶</small>
                            </div>    
                        </div>
                        <div class="col-sm-4">
                            <div class="site-statistics">
                                <span>376k</span>
                                <small>銷量</small>
                            </div>    
                        </div>
                    </div>
                    <div class="members-number">
                        <h3>全球客戶量超過 <span class="shop-green">13,000</span> 位</h3>
                        <img class="img-responsive" src="/public/assets/new/img/map.png" alt="">
                    </div>    
                </div>

                <div class="col-md-5">
                    <form id="sky-form4" class="log-reg-block sky-form">
                        <h2>註冊新帳戶</h2>

                        <div class="login-input reg-input">
                            <section>
                                <label class="input w-per-100">
                                    <input type="email" name="username" placeholder="郵箱(用戶名)" class="form-control k-username">
                                </label>
                            </section>
                            <section>
                                <label class="input w-per-100">
                                    <input type="text" name="nickname" maxlength="20" placeholder="暱稱" class="form-control k-nickname">
                                </label>
                            </section>                                
                            <section>
                                <label class="input w-per-100">
                                    <input type="password" name="password" placeholder="密碼" id="password" class="form-control k-password">
                                </label>
                            </section>                                
                            <section>
                                <label class="input w-per-100">
                                    <input type="password" name="passwordConfirm" placeholder="確認密碼" class="form-control">
                                </label>
                            </section>        
                            <section class="p-r">
                                <label class="input w-per-50">
                                    <input type="text" name="code" placeholder="驗證碼" class="form-control k-code">
                                </label>
                                <img _ngcontent-c3="" src="/captcha" id="img_captcha" class="p-a-xr-yt" onclick="refresh()">
                            </section>     
                            <section class="p-l-20">
                              <label class="checkbox margin-bottom-20">
                                  <input type="checkbox" name="checkbox"/>
                                  <i></i>
                                  我已閱讀並同意WBIOKR商城 <a href="/static/privacy">使用協議</a>
                              </label>
                            </section>                           
                        </div>

                        
                        <button class="btn-u btn-u-sea-shop btn-block margin-bottom-20" type="submit">注 冊</button>
                    </form>

                    <div class="margin-bottom-20"></div>
                    <p class="text-center">已經有帳號? <a href="/shop/login">登錄</a></p>
                </div>
            </div><!--/end row-->
        </div><!--/end container-->
    </div>
    <!--=== End Registre ===-->  
    
<!-- Login Form -->
<script src="/public/assets/new/plugins/sky-forms/version-2.0.1/js/jquery.form.min.js"></script>
<!-- Validation Form -->
<script src="/public/assets/new/plugins/sky-forms/version-2.0.1/js/jquery.validate.min.js"></script>
<script src="/public/assets/common/jsencrypt.min.js"></script>
<script src="/public/assets/common/jquery/messages_zh.min.js"></script>
<script src="/public/assets/new/js/forms/page_registration.js"></script>
<script>
    jQuery(document).ready(function() {
        App.init();
        Registration.initRegistration();
        StyleSwitcher.initStyleSwitcher();      
    });
</script>
<script>
    function refresh() {
        $("#img_captcha").attr("src", "/captcha?" + Math.random());
    }

    // $(function() {
    //     $("#form_sign").validate({
    //         debug:true,
    //         messages:{
    //             comfirmPassword:{
    //                 equalTo:'兩次輸入密碼不一致'
    //             }
    //         },
    //         submitHandler: function(form)
    //         {
    //             if(!app.remember){
    //                 Ap.msg.error("請勾選使用協議");
    //                 return;
    //             }
    //             Ap.loading.start();
    //             let encrypt = new JSEncrypt();
    //             encrypt.setPublicKey(public_key);
    //             let json={username:app.username,password:app.password};
    //             let data=JSON.stringify(json);
    //             let encrpted = encrypt.encrypt(data);
    //             console.log(encrpted, public_key, encrypt.decrypt(encrpted));
                
    //             Ap.request.post('/shop/signIn',{content:encrpted,nickname:app.nickname,code:app.code},function (res) {
    //                 Ap.loading.end();
    //                 if(res.success){
    //                     Ap.msg.alert("註冊成功,趕快去登錄吧!",function () {
    //                         window.location='/shop/login';
    //                     })
    //                 }else{
    //                     Ap.msg.error(res.msg);
    //                 }
    //             });
    //         }
    //     });
    // });
</script>
{% endblock %}
